HTML | &) 


Formatting 
TE e E 


k2 


Objectives = 
œ Plan text formatting 

> Create an ordered list 
> Create an unordered list 
> Format characters 

> Control font selection 
> Customize fonts 

> Align text 


Just as HTML allows you to include different kinds of text elements on 
your Web pages, it also enables you to determine the way text appears in 
the browser window. You can use tags to change text appearance by apply- 
ing fonts and simple styles. Other tags modify the alignment of text in the 


browser window. Formatting the text in your Web pages can improve the 
organization of information and make it easier for users to find what inter- 
ests them. @fm= Grace Dekmejian works in the Information Systems 
department at Nomad Ltd, a travel and sporting goods company. Along 
with her co-workers, Grace is creating a company Web site. She wants to 
enhance the work she’s done so far by formatting the text of the Web pages. 


Planning Text 
m | Formatting 


Text formatting is a powerful tool for organizing the content on your Web pages and making it 
easier for users to navigate. Because HTML was not originally designed to format text in com- 
plex ways, you cannot easily add all the text features to a Web page that you might if you created 
the page in a word processor. However, HTML does include several tags and tag pairs that allow 
you to add basic and useful text formatting to your Web pages. Figure B-1 shows a sample page 
that uses several of these formats. fæ» Grace reviews the formats that she wants to use for 
the Nomad Ltd Web site: 


Lists 

HTML includes tags to automatically format several types of lists. The most commonly used 
lists include ordered and unordered lists. By surrounding a set of list items with the appropri- 
ate tag pair, you can format an ordered list, in which the items automatically appear with 
sequential numbers. The same method allows you to create an unordered list, where a bullet 
character appears in place of the number next to each item. Grace thinks the list of links on the 
Web page would stand out more clearly by using one of the list formats. 


gA) Character Styles 
The three standard character styles—bold, italic, and underline—have their own tag pairs in 
HTML. Both bold and italic are useful tools for setting apart words or areas of text. However, 
because the default format for links includes underlining, use of this tag set to format unlinked 
text generally causes confusion for users. Grace wants to use bold and italic to format several 
short phrases on her Web page. 


A Fonts 


HTML includes a tag pair for changing the font style in blocks of text. This tag pair has some 
limitations, but when used appropriately offers another avenue for customizing the way your 
Web pages appear to users. Grace plans to experiment with font style to see how her page 
appears in fonts other than the default font of the browser; she also will change the font color 
and size in parts of her page. 


AS) Alignment 

By default, Web page text is aligned along the left edge of the browser window. HTML’ alter- 
nate alignment options for blocks of text offer you yet another utility in your Web page design 
toolbox. Grace thinks changing the alignment of certain text on the Nomad Ltd Web page will 
help separate the page into distinct, easily recognizable sections. 


FIGURE B-1: Web page incorporating text formatting 


~~ Nomad Ltd 
Text italicized 
Text color changed—— outside Looking ot —————————~«C~S* 


Shop online to get from your desk to the outdoors without wasting time. 
Get the tickets, get the gear, and get out there. 


Arial font applied 


¢ sporting gear 


Unordered list ¢ adventure travel 
+ about Nomad Ltd Text formatted 
in bold 
Text color changed -———Need Ideas? Our most popular U.S. destinations: 


: 1. Olympic Peninsula, Washington 
Ordered list 2. Grand Teton mountains, Wyoming 


3. Appalachian Trail, East coast p g Text right-aligned 


The clearest way into the Universe is through a forest wilderness. 
-John Muir 


FORMATTING TEXT WITH HTML HTML B-3 


B) Creating Ordered 


am |E ists 


One of the keys to an effective online layout is to divide text into small pieces that a user can eas- 

ily digest. HTML ss list formats provide an easy avenue for keeping your pages Web friendly. An 

ordered list, which uses the tags explained in Table B-1, is an ideal format for steps, rankings, 

and other sets of information for which order is important. @jfqgm= The marketing department 

suggested some text to add to the Nomad Ltd Web page. Grace incorporated these ideas, and the 

document now includes a list of the most popular travel destinations among Nomad customers. 
S&T ep 1 Al Grace recognizes that she can easily format this list by using HTM L's ordered list tags. 


1. Start your text editor program, open the file HTM B-1.htm, then save it as a text doc- 
ument with the filename nomad-b.htm 


2. Locate the line containing the text “Need Ideas?” in the second half of the document, 


select the <BR> tag on the next line, press [Delete], then type <OL> 
The <OL> tag marks the start of an ordered list. Most HTML tags are abbreviations; OL is 


short for Ordered List. 
QuickTip 3. Move the insertion point to the left of the word Olympic at the beginning of the fol- 
While no closing tag is lowing line, press [Spacebar] twice, then type <LI> 
required for a list item, you The <LI> tag marks the text that follows it as a list item. Grace adds two spaces before the list 


may find it helpful to add 
the optional tag </LI> at 
the end of long entries; this 


can make your Web page 4. Select the <BR> tag in the line that follows, then press [Delete] twice 
code easier to understand. <BR> tags aren’t necessary in lists. Each list item automatically starts on a new line. 
5. Make sure the insertion point is to the left of the word Grand, press [Spacebar] 
twice, then type <LI> 


6. Repeat Steps 4 and 5 to remove the final <BR> tag in the list, and to mark the line 
beginning with Appalachian as a list item 


7. Move the insertion point to the end of the last list item, to the right of the word coast, 
press [Enter], then type </OL> 
Your document should resemble the one shown in Figure B-2. 

8. Save your work, start your Web browser, cancel any dial-up activities, then open the 
file nomad-b.htm 


The three items appear numbered sequentially, as shown in Figure B-3. 


9. Click the text editor program button on the taskbar 


item to indent it. This makes it stand out from the surrounding lines of code, and makes it 
clear to anyone reading the HTML that the list items are enclosed within another set of tags. 


TABLE B-1: HTML tags for creating an ordered list 


name | tags | location | example 


Ordered List <0L>..</0L> Surround all the items that are part of an ordered list <OL> 
<Ll>/tem 1 
<Ll>/tem 2 
<Ll>/tem 3 
</0L> 


List Item <LI> Marks the beginning of each item in an ordered list; <Ll>/tem 1 
no closing tag is required <Ll>/tem 2 
<Ll>/tem 3 


FIGURE B-2: HTML document containing code for ordered list ~] 


<BR> 
<A HREF="“construction.htm">adventure travel</A> 
<BR> 
<A HREF="“construction.htm">about Nomad Ltd</A> 


<P>Need Ideas? Our most popular U.S. destinations: 

<OL> 

<LI>Olympic Peninsula, Washington <0L>..</0L> tag 
<LI>Grand Teton mountains, Wyoming pair marks start and 
<LI>Appalachian Trail, East coast end of ordered list 
</0L> format 


<LI> tags mark 
items within list 


<P>The clearest way into the Universe is through a forest 
wilderness. 

<BR> 

-John Muir 


</BODY> 


FIGURE B-3: Web page containing ordered list 


Nomad Ltd 


Outside Looking Out 


Shop online to get from your desk to the outdoors without wasting time. 
Get the tickets, get the gear, and get out there. 


sporting gear 
adventure travel 


about Nomad Ltd 
Need Ideas? Our most popular U.S. destinations: 
1. Olympic Peninsula, Washington 
Numbers appear 2. Grand Teton mountains, Wyoming 
next to list items 3. Appalachian Trail, East coast 


The clearest way into the Universe is through a forest wilderness. 
-John Muir 


FORMATTING TEXT WITH HTML HTML B-5 


B) Creating Unordered 


© 
nm | Lists 
Like an ordered list, an unordered list is a simple way to divide Web page text into smaller por- 
tions. While the items in an ordered list are numbered in order, an unordered list appears with 
a bullet icon next to each item. This format works well for listing sets of ideas when each item 
is equally important and order doesn’t matter. Table B-2 explains the HTML tags used to create 
an unordered list. Qf» The Nomad Ltd Web page that Grace created already contains a list 
of three links. She thinks that formatting the links with the unordered list format will help users 
quickly recognize the links as a set of related information. 


1. In your text editor, locate the line of text ending with “out there”, select the <P> tag 


at the start of the line below it, then press [Delete] 
Formatting this section as a bulleted list makes the <P> tag unnecessary. 


2. Type <UL> then press [Enter] 


<UL> is the opening tag for an unordered list. 


3. Make sure the insertion point is to the left of the first <A> tag, press [Spacebar] 


twice, then type <LI> 
Just as in an ordered list, <LI> marks the text that follows as a list item, and does not require 
a closing tag. 


4. Select the <BR> tag in the line that follows, then press [Delete] twice 


5. Make sure the insertion point is to the left of the second <A> tag, press [Spacebar] 
twice, then type <LI> 


6. Repeat Steps 4 and 5 to remove the final <BR> tag in the list, and to mark the third 
line beginning with the “</A> tag” as a list item 


7. Move the insertion point to the end of the last list item, to the right of the third clos- 
ing </A> tag, press [Enter], then type </UL> 


Your document should resemble the one shown in Figure B-4. 


8. Save your work, click the browser program button in the taskbar, then reload 


nomad-b.htm 
The three links are indented, and each is preceded by a circular bullet character, as shown in 
Figure B-5. 


9. Click the text editor program button on the taskbar 
TABLE B-2: HTML tags for creating an unordered list 


tag(s) | description | example 


<UL>..</UL> Surround all the items that are part of an unordered list <UL> 
<LI>/tem 1 
<LI>/tem 2 
<Ll>/tem 3 
</UL> 


<LI> Marks the beginning of each item in an unordered list; no closing tag is required <Ll>/tem 1 
<Ll>/tem 2 
<Ll>/tem 3 


FIGURE B-4: HTML document containing code for unordered list 
</HEAD> 
<BODY> 


<H1>Nomad Ltd</H1> 
<H4>Outside Looking Out</H4> 


Shop online to get from your desk to the outdoors without 
wasting time. 

<BR> 

Get the <A HREF="construction.htm">tickets</A>, get the 


<A HREF="construction.htm">gear</A>, and get out there. 


<UL> 
<LI> tags mark <LI><A HREF=“construction.htm">sporting gear</A> <UL>..</UL> tag 
items withinilist <LI><A HREF="“construction.htm">adventure travel</A> pair marks start 
<LI><A HREF=“construction.htm”>about Nomad Ltd</A> and end of 
</UL> unordered list 


format 
<P>Need Ideas? Our most popular U.S. destinations: 


FIGURE B-5: Links formatted as unordered list 


Nomad Ltd 


Outside Looking Out 


Shop online to get from your desk to the outdoors without wasting time. 
Get the tickets, get the gear, and get out there. 


è sporting gear 
e adventure travel 
¢ about Nomad Ltd 


Bullets appear 
next to list items 


Need Ideas? Our most popular U.S. destinations: 


1. Olympic Peninsula, Washington 
2. Grand Teton mountains, Wyoming 
3. Appalachian Trail, East coast 


| E-mail 
(Electronic Mail) -- Messages, usually text, sent from one person to another via computer. 
E-mail can also be sent automatically to a large number of addresses (Mailing List). 


See Also: Listserv® , Maillist 


A very common method of networking computers in a LAN. Ethernet will handle about 
10,000,000 bits-per-second and can be used with almost any kind of computer. 


See Also: Bandwidth , LAN 


FORMATTING TEXT WITH HIML HTML B-7 


B) Formatting 
am | Characters 


Sometimes words or phrases on your Web pages need to stand out. In documents created in a 
word processor, this is most often accomplished using three standard formats: bold, italic, and 
underline. While you can easily add any of these formats to your Web page text, their use in 
HTML comes with some caveats. As you have learned, a link’s default format in the browser 
includes underlining. Therefore, it’s best not to underline unlinked text in a Web page, then you 
avoid confusing the users. Additionally, both bold and italic formatting can each be created by 
two different tag pairs. The most obvious choices—<B>..</B> for bold and <I>..</I> for 
italic—render these formats only visually on a browser. Because some Web users require differ- 
ent interfaces—for example, audio devices that read Web content to visually impaired people— 
using the alternate tags <STRONG> for bold and <EM> for italic is preferable. Table B-3 
summarizes the tags available for character formatting. @jfjm= Grace is cautious about overus- 
ing different formats on her page, which might distract the user from the page’s focus. However, 
she has identified two small sections where extra formatting would provide a needed contrast. 
She decides to apply bold and italic format using the alternate tags, to ensure that the Nomad 
Ltd page is accessible to the widest possible audience. 


1. In your text editor, locate the line formatted with the “<H4>..</H4> tag pair”, near 
the top of the page 


2. Click to the left of the third word, Out, then type <EM> 


<EM> marks the beginning of a word Grace wants to italicize. 


3. Move the insertion point to the right of the word Out, making sure it is to the left of 
the </H4> tag, then type </EM> 


4. Locate the line of text that starts with “Get the”, move the insertion point to the left 
The end of this sentence of the g in the phrase “get out there” at the end of the sentence, then type 
may wrap to a second line. <STRONG> 

5. Move the insertion point to the left of the period at the end of the sentence, then type 
</STRONG> 


The phrase “get out there” at the end of the sentence will appear in boldface in the browser. 
Your document should resemble the one shown in Figure B-7. 


6. Save your work, click the browser program button on the taskbar, then reload 


nomad-b.htm 
As shown in Figure B-8, the word “Out” in the company’s slogan appears italicized, and the 
phrase “get out there” appears in boldface. 


7. Click the text editor program button on the taskbar 


FIGURE B-7: HTML document containing bold and italic tags 
</HEAD> 


Tag pair marks text 
<BODY> ee el as italic 
<H1>Nomad Ltd</H1> 


<H4>Outside Looking <EM>Out</EM></H4> 


Shop online to get from your desk to the outdoors without 
wasting time. 

<BR> 

Get the <A HREF="“construction. htm" >tickets</A>, get the 
<A HREF="“construction.htm">gear</A>, and <STRONG>get out 
there</STRONG>. 


<UL> ; 
<LI><A HREF="construction.htm">sporting gear</A> Tag pair marks text 
<LI><A HREF="“construction. htm" >adventure travel</A> as bold 
<LI><A HREF=“construction.htm">about Nomad Ltd</A> 
</UL> 


FIGURE B-8: Web page displaying bold and italic formats 
Text marked by 
Nomad Ltd <EM>..</EM> tag pair 
appears in italic 
Outside Looking Out 


Shop online to get from your desk to the outdoors without wasting time. 
Get the tickets, get the gear, and get out there. 


e sporting gear 
¢ adventure travel 


¢ about Nomad Ltd Text marked by 
<STRONG>..</STRONG> 
Need Ideas? Our most popular U.S. destinations: tag pair appears in bold 


1. Olympic Peninsula, Washington 
2. Grand Teton mountains, Wyoming 
3. Appalachian Trail, East coast 


The clearest way into the Universe is through a forest wilderness. 
-John Muir 


TABLE B-3: HTML text-formatting tags 


name | tag(s) | function | notes 


FORMATTING TEXT WITH HTML HTML B-9 


B) Controlling Font 
aM | Selection 


So far, you have used several text-formatting features to change the characteristics of small sec- 
tions of text. HTML also allows you to alter text appearance more fundamentally, and on larger 
areas of the page. One tool for customizing the basic appearance of Web page text is the 
<FONT>..</FONT> tag pair. The opening tag can be modified with several different attributes 
including FACE, which changes the font in which text appears. @jqgmme Grace is used to work- 
ing with different fonts in a word processor, and wants to see how the Nomad Ltd Web page 
would look in another font. 


1. In your text editor, move the insertion point to the right of the <BODY> tag near the 
top of the document, then press [Enter] 


2. Type <FONT FACE="arial, helvetica, sans serif">, then press [Enter] 

Although you can specify any font name as the FACE for the marked section, a user’s 
browser can change the default font only if the replacement font is installed on the user’s 
computer. Thus, it’s wisest to use fonts that are commonly available. FACE also allows you 
to specify multiple fonts; the browser checks if the first one is available, and if not, checks 
the next, and so on. Because certain fonts are more commonly used in different operating 
systems, Grace lists a similar-looking font used in three operating systems: arial (Windows), 
helvetica (Macintosh), and sans serif (UNIX). 


3. Click in the empty line above the </BODY> tag near the end of the document, press 
[Enter], then type </FONT> 


The opening and closing font tags surround all of the text in your Web page. Your document 
should resemble the one shown in Figure B-9. 


4. Save your work, click the browser program button on the taskbar, then reload 


nomad-b.htm 
All the text on the page now appears in Arial font, as shown in Figure B-10. 


5. Click the text editor program button on the taskbar 


FIGURE B-9: HTML document containing font tags 
</HEAD> 


<BODY> 

Location of —-+-<FONT FACE="arial, helvetica, sans serif™> 
opening 
<FONT> tag | <H1>Nomad Ltd</H1> 

<H4>Outside Looking <EM>Out</EM></H4> 


Shop online to get from your desk to the outdoors without 
wasting time. 

<BR> 

Get the <A HREF="“construction.htm">tickets</A>, get the 
<A HREF="construction.htm">gear</A>, and <STRONG>get out 


there</STRONG>. : 
<LI><A HREF="construction.htm">about Nomad Ltd</A> 


<UL> </UL> 


<LI><A HREF="cor . . 
<LI><A HREF="cor <P>Need Ideas? Our most popular U.S. destinations: 


<LI><A HREF= "con <OL> f ; ; 
<LI>Olympic Peninsula, Washington 
<LI>Grand Teton mountains, Wyoming 
<LI>Appalachian Trail, East coast 
</OL> 


<P>The clearest way into the Universe is through a forest 
wilderness. 

<BR> 

-John Muir 


Location of closing —-</FONT> 
</FONT> tag </BODY> 


</HTML> 


FIGURE B-10: Nomad Ltd Web page in Arial font 


Nomad Ltd 


Outside Looking Out 


Shop online to get from your desk to the outdoors without wasting time. 
Get the tickets, get the gear, and get out there. 


¢ sporting gear 
Entire text of Web + adventure travel 
page changed to + about Nomad Ltd 


Arial font 
Need Ideas? Our most popular U.S. destinations: 


1. Olympic Peninsula, Washington 
2. Grand Teton mountains, Wyoming 
3. Appalachian Trail, East coast 


The clearest way into the Universe is through a forest wilderness. 
-John Muir 


ee a A 


Hexadecimals use the num- 
bers 0-9 and the letters A-F; 
therefore the character “0” 
always means the number 
zero, since the letter O is not 
used in this system. 


Customizing Fonts 


The <FONT>..</FONT> tag pair allows you to change text format in several ways. In addition 
to changing the font itself with the FACE attribute, you can use the COLOR attribute to change 
text to a color other than black. You also can customize font appearance with the SIZE attribute, 
which changes the size of characters. Table B-4 summarizes the tags and attributes for working 
with fonts. @jfqgme Grace thinks that adding color to a few phrases on the Nomad Web page 
would make them stand out without being distracting. 


1. In your text editor, move the insertion point to the right of the <H4> tag near the top 
of the document, just to the left of the text Outside Looking 
2. Type <FONT COLOR="#A52A2A"> 


Although you can use descriptive words for colors, such as “green” or “navy,” to specify a color 
for the COLOR attribute, using the numerical equivalent is a good habit to develop. These six- 
digit numbers, known as hexadecimal equivalents, or hexadecimals, tell the browser math- 
ematically how to create the color you want. Hexadecimal equivalents also are interpretable by 
a wider range of browsers than are color names. Additionally, while all browsers treat hexa- 
decimals the same, browsers may vary in how they display named colors. Grace wants her page 
to display as predictably as possible for all users of the Nomad Ltd Web page, so she looked up 
the hexadecimal equivalent of a medium brown color on the Web. 


3. Move the insertion point to the left of the </H4> tag at the end of the line, just to 
the right of the </EM> tag, then type </FONT> 


4. Move the insertion point to the left of the text Need Ideas? in the middle of the page, 


just to the right of the <P> tag, then type <FONT COLOR="#238E68"> 

This is the hexadecimal equivalent of a medium green color, which Grace looked up in an 
online HTML reference on the Web. She chose two colors that work well together, and which 
enhance the outdoors theme of the page’s content. 

5. Move the insertion point to the right of the question mark after the text Need Ideas?, 
then type </FONT> 
Figure B-11 shows the Web page code, including these two color changes. 

6. Locate the line that begins “<P>The clearest way”, near the end of the document, 
move the insertion point to the right of the <P> tag, just to the left of the word The, 
then type <FONT SIZE="-1"> 
Grace uses the SIZE attribute to format the quote in a font one size smaller than the Web 
page’s default font. 

7. Move the insertion point to the end of the line that reads “-John Muir”, then type </FONT> 
Figure B-12 shows the source code for the font size change. 

8. Save your work, click the browser program button on the taskbar, then reload 
nomad-b.htm 
As Figure B-13 shows, the text on Grace’s Web page now includes two font colors, and a vari- 
ation in font size. 


3. me the text haa puan Auriga on nue pe 


FIGURE B-11: HTML document with font COLOR attributes 


<H1>Nomad Ltd</H1> 
<H4><FONT COLOR="#A52A2A">Outside Looking 
>Out</EM>< /FONT></H4> 


<FONT> tags to i ; 
change text color Shop online to get from your desk to the outdoors without 
to brown wasting time. 


<BR> 

Get the <A HREF="“construction.htm">tickets</A>, get the 
<A HREF="construction.htm">gear</A>, and <STRONG>get out 
there</STRONG>. 


<UL> 
<LI><A HREF=“construction.htm">sporting gear</A> 
<LI><A HREF=“construction.htm">adventure travel</A> 
<LI><A HREF="construction.htm">about Nomad Ltd</A> 


</UL> <FONT> tags to 
change text color 
<P><FONT COLOR="#238E68">Need Ideas?</FONT> Our most to green 


popular U.S. destinations: 


FIGURE B-12: HTML document with font SIZE argument 


<FONT> tags to <FONT SIZE="-1">The clearest way into the Universe is 
decrease to next h a forest wilderness. 
<BR> 


smaller size -John Muir</FONT> 


FIGURE B-13: Nomad Ltd Web page with font color and size changes 


Nomad Ltd 


Outside Looking Out 


Shop online to get from your desk to the outdoors without wasting time. 


New colorsisetwith Get the tickets, get the gear, and get out there. 


COLOR argument e sporting gear 


¢ adventure travel 
¢ about Nomad Ltd 


Need Ideas? Our most popular U.S. destinations: 
1. Olympic Peninsula, Washington 


2. Grand Teton mountains, Wyoming 
3. Appalachian Trail, East coast 


Text size changed The clearest way into the Universe is through a forest wilderness. 
with SIZE attribute -John Muir 


TABLE B-4: HTML font formatting tags and attributes 


tags | attribute | function example 


FORMATTING TEXT WITH HIML 


©) | Aligning Text 


In addition to the methods you've used to control what text looks like, HTML also provides 
HTML some basic control over where text appears on the page. Common paragraph tags, including 
i i <P> and the heading tag pairs <H1>..</H1> through <H6>..</H6>, support the ALIGN 
attribute. The default value for ALIGN is “left,” meaning that each line of text is flush with the 
left edge of the browser window. Other valid settings are “right,” which sets each line of text even 
with the right edge of the window, and “center,” which centers each line between the two edges 
of the window. Recent browsers also support a value of “justify,” which stretches each line of text 
so it’s flush with both the left and right edges of the browser window. Table B-5 summarizes the 
ALIGN attribute. Øf» Grace wants to separate the quote at the bottom of the page from the 
other page items. She thinks that right alignment would accomplish this. 


1. In your text editor, locate the line beginning with “<P><FONT SIZE="-1">The 
clearest way” 


2. Move the insertion point immediately to the right of the letter P in the <P> tag 
3. Press [Spacebar], then type ALIGN="right" 


Your page should resemble the one shown in Figure B-14. 
4. Save your work, click the browser program button on the taskbar, then reload 


nomad-b.htm 
As Figure B-15 shows, the quote at the bottom of the Web page now lines up with the right 
edge of the browser window. 


5. Close your browser and text editor 


TABLE B-5: HTML ALIGN attribute 


tags attribute examples results 


> HTML B-14 FORMATTING TEXT WITH HTML 


FIGURE B-14: HTML document containing ALIGN attribute 
Kk /UL> 


KP><FONT COLOR="#238E68">Need Ideas?</FONT> Our most 
popular U.S. destinations: 
<OL> 
<LI>Olympic Peninsula, Washington 
<LI>Grand Teton mountains, Wyoming 
<LI>Appalachian Trail, East coast 


ALIGN attribute </0L> 
lines up paragraph 
with right edge of <P |ALIGN="right"><FONT SIZE="-1">The clearest way into 


browser window the Universe is through a forest wilderness. 
<BR> 
-John Muir</FONT> 


</FONT> 
</BODY> 


</HTML> 


FIGURE B-15: Nomad Ltd Web page containing right-aligned text 


Nomad Ltd 


Outside Looking Out 


Shop online to get from your desk to the outdoors without wasting time. 
Get the tickets, get the gear, and get out there. 


¢ sporting gear 
¢ adventure travel 


¢ about Nomad Ltd 
Need Ideas? Our most popular U.S. destinations: 


1. Olympic Peninsula, Washington 
2. Grand Teton mountains, Wyoming 
3. Appalachian Trail, East coast 


The clearest way into the Universe is through a forest wilderness. : 
-John Muir Text aligned 


with right 
edge of 
browser 
window 


- Practice 


» Concepts Review | 


Identify the function of each item labeled in Figure B-16. 
FIGURE B-16 


from your 


ut Nomad L 


Match each attribute with the HTML tag it modifies (you may use each tag more than once). 


6. COLOR a. <FONT> 
7. ALIGN b. <0L> 
8. TYPE G, <P> 

9. START 

10. FACE 

11. SIZE 


Practice 


Select the best answer from the list of choices. 


12. Which one of the following HTML codes would you use to format text in an ordered list? 
a. <P ALIGN=“center”> 
b. <STRONG>..</STRONG> 
c. <0L>..</0L> 
d. <FONT COLOR=“#A52A2A">..</FONT> 


13. Which one of the following HTML codes would you use to change character style to bold? 
a. <P ALIGN=“center”> 
b. <STRONG>..</STRONG> 
c. <0L>..</0OL> 
d. <FONT COLOR=“#A52A2A”>..</FONT> 


14. Which one of the following HTML codes would you use to change font color? 
a. <P ALIGN=“center”> 
b. <STRONG>..</STRONG> 
c. <OL>..</0L> 
d. <FONT COLOR=“#A52A2A">..</FONT> 


15. Which one of the following HTML codes would you use to center-align a paragraph? 
a. <P ALIGN=“center”> 
b. <STRONG>..</STRONG> 
c. <0L>..</0L> 
d. <FONT COLOR=“#A52A2A">..</FONT> 


16. Which of the following tag pairs should you avoid using, so that users aren’t confused? 
a. <U>..</U> 
b. <B>..</B> 
c. <EM>..</EM> 
d. <STRONG>..</STRONG> 


1 


-~ 


. Which of the following tag pairs adds a text format that can be interpreted by Web interfaces other than 
browsers? 
a. <B>..</B> 
Decl= l= 
ce all> > 
d. <STRONG>..</STRONG> 


18. Which of the following tag pairs is the best choice for a list of information where order is important? 
a. <FONT>..</FONT> 
b. <OL>..</OL> 
c. <UL>..</UL> 
d. <STRONG>..</STRONG> 
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B Skills Review 


1. Create an ordered list. 

a. Start your text editor, open the file HTM B-2.htm, then save it as a text document with the filename 

cco-b.htm. 

b. Locate the line beginning with “<P>Let our eyewear” in the second half of the document, click in the 
blank line below, press [Enter], then insert the <OL> tag with an attribute to mark each list item with a 
capital letter. 

. Replace the <P> tags at the beginning of the three list item lines with two spaces and the <LI> tag. 

. Delete the two <BR> tags between the three list items. 

. Move the insertion point to the blank line below the last list item, type “</OL>”, then press [Enter]. 
Save your work. 

. Start your Web browser, view the file cco-b.htm, and verify that the ordered list appears correctly. 
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. Create an unordered list. 

a. In your text editor, locate the line beginning with “<H3>” near the top of the document, click in the blank 
line below, press [Enter], then insert the <UL> tag. 

b. Insert two spaces and the <LI> tag to the left of each <A> tag for the four list items below the text 
“Visionary Eyewear for 50 Years”. 

c. Delete the three <BR> tags between the list items. 

d. Move the insertion point to the end of the last list item, to the right of the fourth closing </A> tag, press 
[Enter], then type “</UL>”. 

e. Save your work. 

f. Reload the page in your browser to verify that the unordered list appears correctly. 
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. Format characters. 
a. In your text editor, locate the line near the bottom of the page that begins “<P>Ask about”, position the 
insertion point to the right of the <P> tag, just to the left of the word Ask, then type “<EM>”. 
b. Move the insertion point to the end of the line, to the right of the word eyewear, then type “</EM>”. 
c. Save your work. 
d. Reload the page in your browser to verify that the last line of text appears in italics. 
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4. Control font selection. 

. In your text editor, move the insertion point to the right of the <BODY> tag near the top of the document, 
then press [Enter]. 

b. Type “<FONT FACE=“arial, helvetica, sans serif’>”. 

c. In the empty line above the </BODY> tag near the end of the document, press [Enter], then type “</FONT>”. 

d. Save your work. 

e. Reload the page in your browser to verify that all the text on the page appears in Arial. 
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. Customize fonts. 

a. In your text editor, move the insertion point to the right of the <H1> tag near the top of the document, just to 
the left of the word Crystal. 

b. Insert a <FONT> tag that includes a COLOR attribute set to “# 236B8E”. 

. Move the insertion point to the left of the </H1> tag at the end of the line, just to the right of the word 
Opticals, then insert the </FONT> tag. 

d. In the last list item in the ordered list near the bottom of the document, place the insertion point to the left 

of the word Crystal, then add a <FONT> tag that includes a COLOR attribute set to “# 236B8E”. 
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e. Move the insertion point to the right of the word Opticals in the same line, then insert the </FONT> tag. 

f. Save your work. 

g. Reload the page in your browser to verify that the text color is changed in the two designated locations. 
6. Align text. 


a. In your text editor, locate the line near the end of the document that begins with “<P><EM>Ask about”, 
then move the insertion point immediately to the right of the letter P in the <P> tag. 

b. Press [Spacebar], then insert the ALIGN attribute with a value of “center”. 

. Save your work. 

d. Reload the page in your browser to verify that the last line of text is centered between the two edges of the 
window. 

e. Close your browser and text editor. 


» Independent Challenges 
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J. You want to use the new HTML formatting features you have learned to enhance the Web page for Star Dot Star, 
your consulting business. 
To complete this independent challenge: 


a. Start your text editor, open the file HTM B-3.htm, then save it as a text document with the filename sds-b.htm. 

b. Use the <UL>..</UL> and <LI> tags to format the list of links as an unordered list. 

c. Use the <EM>..</EM> tag pair to italicize the words “get the most” near the top of the document. 

d. Use the <FONT>..</FONT> tag pair to change the font of the document to Arial. 

e. Use the <FONT>..</FONT> tag pair to change the color of the heading, “Star Dot Star Consulting,” at the top of 
the page, to color #8E2323. 

f. Use the ALIGN attribute to center the last line of text “Upgrades are our specialty!”. 

g. Save your work. 

h. Preview the Web page in your browser. 

i. Print the Web page in your browser. 
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P. You have been developing a Web page for your employer, Metro Water, the local water department. You have added 
links to informational pages as you originally planned. Now you want to work with the development team to enhance 
the text format of the Web page. 

To complete this independent challenge: 


. Start your text editor, open the file HTM B-4.htm, then save it as a text document with the filename mw-b.htm. 
. Format the list of links to related information as an unordered list. 
. Italicize the word “difference” near the end of the document. 
. Change the font of the entire document to Arial. 
. Change the color of the two headings at the top of the page to color #008B8B. 
. Center-align the two headings at the top of the page. 
. Save your work. 
. Preview the Web page in your browser. 
Print the Web page in your browser. 
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3. You have recently opened your own video store, Film Clips, and plan to design an in-store information system 
that uses HTML and a browser. With this system, customers can learn more about the movies in the store. 
To complete this independent challenge: 


a. Sketch the opening Web page for this information system. Include the store name, a slogan, and a linked list of 
movie genres (comedy, drama, horror, foreign, etc.). 

b. Create a new text document and save it with the filename fc-b.htm. 

c. Enter structural tags and the text for your page, and format the links to target the file construction.htm. 

d. Format the list of movie genres as an unordered list. 

e. Change the font of the page to Arial. 

f. Change at least two other text formats on your page, such as bold text, italic text, font color, font size, or text 
alignment. 

g. Save your work. 

h. Preview the Web page in your browser. 

i. Print the Web page in your browser. 
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4... Adding color to a Web page is both easy to do and useful as a design tool. However, when you don’t 
have an HTML reference book handy, figuring out the correct hexadecimal code for a color you want 
~ to use can be intimidating. Fortunately, many free and useful HTML resources are available on the Web. 
To complete this independent challenge: 


a. Create a simple Web page named colors-b.htm containing one or two paragraphs of sample text. 
. Choose three font colors to apply to words or phrases. 
c. Connect to the Internet and use your browser to go to one of the following online HTML references: 
WWW.W3.org 
hotwired.lycos.com/webmonkey 
www.webreference.com 
If you have trouble locating these pages, go to www.course.com, navigate to the page for this book, click the link 
for the Student Online Companion, click the link for this unit, and use the links listed there as a starting point 
for your search. 
d. Look up the hexadecimal equivalents for the three colors you chose, then apply each color to a word or phrase in 
your sample Web page. 
. Save your work. 
. Preview the Web page in your browser. 
. Print the document in your browser. 
. Disconnect from the Internet. 
Exit your text editor and browser. 
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> Visual Workshop 


At your job at Touchstone Booksellers, a small bookstore, you are working to convince the owner that she could a 
a wider audience by doing business on the Web. She was intrigued by the sample Web page you showed her, so you 
decide to format the text to give the page a more sophisticated design. Open the file HTM B-5.htm, save it as a text 
document called tsb-b.htm, then edit the file to match the Web page shown in Figure B-17. 


FIGURE B-17 
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